<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item,index) in singerStyle" :key="index" @click="handleChangeView(item)"
          :class="{active:item.name==activeName}">
        {{ item.name }}
      </li>
    </ul>
    <div>
      <content-list :contentList="albumDatas"></content-list>
      <!--   分页   -->
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
                       :current-page="currentPage" :page-size="pageSize" :total="albumDatas.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import ContentList from '@/views/components/ContentList';
import {singerStyle} from '@/assets/data/singer';

export default {
  name: 'singer',
  components: {
    ContentList
  },
  data() {
    return {
      albumDatas: [],      //歌手数据
      pageSize: 15,        //页面大小，一页有15条数据
      currentPage: 1,      //当前页，默认第一页
      singerStyle: [],           //风格
      activeName: '全部歌手'    //当前风格
    }
  },
  mounted() {
    this.singerStyle = singerStyle;
    this.getSingerList();
  },

  methods: {
    getSingerList() {
      this.albumDatas = [
        {name: '周杰伦', id: 1, pic: '/profile/avatar/2023/04/03/13_20230403142711A001.jpg', sex: 1},
        {name: '陈奕迅', id: 2, sex: 1}]
      /*getAllSinger()
        .then(res => {
          this.currentPage = 1;
          this.albumDatas = res;
        })*/
    },
    //获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //根据类型显示对应的歌手
    handleChangeView(item) {
      this.activeName = item.name;
      this.albumDatas = [];
      if (item.name == '全部歌手') {
        this.getSingerList();
      } else {
        this.getSingerOfSex(item.type)
      }
    },
    //根据性别查询对应的歌手
    getSingerOfSex(sex) {
      /*getSingerOfSex(sex)
        .then(res => {
          this.currentPage = 1;
          this.albumDatas = res;
        })*/
    },

  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/singer.scss';
</style>
